<template>
	<view>
		<uni-nav-bar left-icon="arrowthinleft" title="修改资料" :border="false" bg="bg-zhuse" color="#fff" @clickLeft="goBack()"></uni-nav-bar>
		<view class="padding-x-30 bg-fff">
			<view class="padding-y-30 solid-bottom flex align-center">
				<text class="fs-30 color-333">头像</text>
				<view class="flex1 padding-x-24 flex justify-end" @tap="upload()">
					<image class="info_img" :src="info.avatar" mode="aspectFit"></image>
				</view>
			</view>
			<view class="padding-y-30 solid-bottom flex align-center">
				<text class="fs-30 color-333">昵称</text>
				<view class="flex1 padding-x-24 flex justify-end">
					<input class="w100 fs-30 color-333 text-right text-cut" type="text" placeholder="请输入昵称" v-model="info.name" />
				</view>
			</view>
			<view  @tap="selarea()" class="padding-y-30 solid-bottom flex align-center">
				<text class="fs-30 color-333">地区</text>
				<view class="flex1 padding-x-24 flex justify-end">
					<input class="w100 fs-30 color-333 text-right text-cut" type="text" placeholder="请选择地区" disabled v-model="area"/>
				</view>
			</view>
			<view class="padding-y-30 flex align-center justify-between solid-bottom ">
				<view class="fs-30 color-333">性别</view>
				<picker  :range="sexArr" @change="checkSex" :value="sexIndex">
					<view class="fs-30 color-333">{{sexArr[sexIndex] || '请选择性别'}}</view>
				</picker>
			</view>
			<view class="padding-y-30 flex align-center justify-between solid-bottom">
				<view class="fs-30 color-333">出生日期</view>
				<picker mode=date @change="checkBirth"  :value="info.birthday">
					<view class="fs-30 color-333">{{info.birthday || '请选择出生日期'}}</view>
				</picker>
			</view>
		</view>
		<view class="padding-x-60 margin-top-60 flex justify-between align-center">
			<view @click="submit()" class="public_btn w100" style="border-radius: 70rpx;">确认修改</view>
		</view>

		<!-- 地区 -->
		<uni-popup ref="area" type="bottom">
			<view class="area_wrap bg-fff padding-40 radius-top30 relative">
				<image class="area_close" src="../../static/img/close_icon.png" mode="aspectFit" @tap="close()"></image>
				<view class="fs-32 fw-bold text-center">请选择地区</view>
				<view class="flex align-center padding-y-30">
					<text class="area_sel text-cut padding-x-16" v-for="(item, index) in arr" :key="index" @tap="selText(item, index)">{{item.label}}</text>
					<text class="area_sel color-zhuse" v-if="hasMore">请选择</text>
				</view>
				<scroll-view scroll-y class="area_box padding-y-40">
					<view class="fs-28 color-333 padding-y-16 text-cut" :class="{'fw-bolder color-zhuse':current == index }" v-for="(item, index) in list" :key="item.value" @tap="toggle(item, index)">
						<image v-if="current == index" class="duihao" src="../../static/img/duihao.png" mode="aspectFit"></image>
						{{item.label}}
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<!-- 地区end -->
		

	</view>
</template>

<script>
export default {

	data() {
		return {
			info:{},
			avatarId:'',
			sexArr:['未知','男','女'],
			sexIndex:0,
			
			area:'',
			list:[],
			arr:[],
			current:-1,
			textCurrent:0,
			hasMore:true
		};
	},
	onShow() {
		this.getInfo();
		this.init();
	},
	methods: {
		getInfo(){
			this.$api.material().then(res=>{
				if(res.code == 1){
					this.info = res.data.data;
					this.sexIndex = res.data.data.sex;
					this.area = res.data.data.province_name + res.data.data.city_name + res.data.data.area_name
				}
			})
		},
		
		// 选择性别
		checkSex(e){
			this.sexIndex = e.detail.value;
			this.info.sex = this.sexIndex
		},
		// 出生日期
		checkBirth(e){
			this.info.birthday = e.target.value
		},
		
		reset(){
			this.list = [];
			this.arr = [];
			this.current = -1;
			this.textCurrent = 0;
			this.area = '';
			this.init();
		},
		init(region){
			var data = {
				region: region || ''
			}
			this.$api.getRegion(data).then(res => {
				if(res.code == 1){
					this.list = res.data;
					if(this.list.length > 0){
						this.list.forEach((m,i)=>{
							if(this.arr[this.textCurrent] && m.value == this.arr[this.textCurrent].value){
								this.current = i;
							}
						})
					}
				}else{
					if(res.data.length == 0){
						console.log("----")
						this.hasMore = false
						this.area = '';
						this.arr.forEach((item, index)=>{
							this.area += item.label;
						})
						this.info.province = this.arr[0].value;
						this.info.city = this.arr[1].value;
						this.info.area = this.arr[this.arr.length - 1].value;
						this.$refs.area.close();
					}else{
						console.log("=====")
						this.hasMore = true
					}
				}
			});
		},
		toggle(item, index){
			this.current = index;
			this.init(item.value);
			this.arr[this.textCurrent] = item;
			if(this.textCurrent+1 < this.arr.length){
				this.arr = this.arr.slice(0, this.textCurrent+1)
			}
			this.textCurrent++;
			this.current = -1;
		},
		selarea(){
			this.$refs.area.open();
			if(!this.hasMore){
				if(this.arr.length == 1){
					this.textCurrent = this.arr.length - 1;
					this.init();
				}
				if(this.arr.length > 1){
					this.textCurrent = this.arr.length - 1;
					this.init(this.arr[this.arr.length - 2].value || '');
				}
				if(this.arr.length == 0){
					this.reset();
				}
			}
		},
		selText(item, index){
			this.textCurrent = index;
			if(index == 0){
				this.init();
			}else{
				this.init(this.arr[index-1].value);
			}
		},
		close(){
			if(this.arr.length < 3){
				this.reset();
			}
			this.$refs.area.close();
		},
		
		
		upload(){
			this.$tool.upload().then(res=>{
				this.info.avatar = res.showImg;
				this.avatarId = res.id;
			})
		},
		submit(){
			var data = {
				name:this.info.name,
				province:this.info.province,
				city:this.info.city,
				area:this.info.area,
				sex:this.info.sex,
				birthday:this.info.birthday,
			}
			if(this.avatarId){
				data.avatar = this.avatarId
			}
			this.$api.changeInfo(data).then(res=>{
				this.$msg(res.msg);
				if(res.code == 1){
					setTimeout(()=>{
						uni.navigateBack()
					}, 400)
				}
			})
		},
		
	}
};
</script>

<style lang="scss" scoped>
.info_img{width: 100rpx;height: 100rpx;border-radius: 100%;}

</style>
